<!DOCTYPE html>
<html lang="en">
<head>
    <!-- UTF-8，防止中文乱码 -->
    <meta charset="UTF-8">

    <!-- 浏览器标签页标题 -->
    <title>探索HTML的奥秘 - 我的学习笔记</title>

    <!-- 移动端设置, 让布局宽度等于设备宽度，初始缩放 1 倍，禁止默认缩小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 描述，用于搜索引擎 -->
    <meta name="description" content="这是一个关于HTML元数据、文本、图片、表格、表单及HTML5语义化标签应用的详细教程与示例页面。">

    <!-- 关键字，用于搜索引擎 -->
    <meta name="keywords" content="HTML, 元数据, 教程, 前端开发, Web开发, 语义化标签">

    <!-- 作者-->
    <meta name="author" content="故柠">
</head>
<body>
    <!-- 每个页面有且仅有一个 h1，用作全局主题；h2~h6 可多次出现，用于子级标题 -->
    <h1>欢迎来到我的HTML实验页面</h1>

    <!-- h2 作为章节标题，把内容拆成“文本格式化”与“图片与超链接”两大部分 -->
    <h2>1. 文本格式化</h2>

    <!-- 在代码示例里需要原样输出“<”和“>”，必须用字符实体 &lt; 与 &gt; 转义，否则浏览器会误当成标签解析 -->
    <p>这是一个普通的段落（&lt;p&gt;）。HTML允许我们使用标签来<strong>加粗强调</strong>或使用<em>斜体表示轻微强调</em>。</p>

    <!-- strong/em/mark/ins/del 都是“语义化”标签：它们告诉浏览器/搜索引擎/辅助工具“这里是什么含义”，
         具体长什么样交给 CSS；这样即使样式被禁用，文档结构依然清晰 -->
    <p>我们还可以<mark>高亮标记文本</mark>，插入<sup>上标</sup>和<sub>下标</sub>，或者给文本添加<ins>下划线（插入）</ins>和<del>删除线（删除）</del>。</p>

    <!-- code 标签表示“内联代码”，配合 pre 可实现多行代码块 -->
    <p>代码示例: <code>console.log("Hello, World!");</code></p>

    <!-- blockquote 用于整段引用，可嵌套 cite 属性给出出处；屏幕阅读器会朗读为“引用” -->
    <blockquote>这是一个引用块（&lt;blockquote&gt;），常用于引用他人的话或段落。</blockquote>

    <!-- pre 保留源代码里的空格、缩进和换行，适合展示诗歌、代码、ASCII 图等需要固定格式的内容 -->
    <pre> 预格式化文本（&lt;pre&gt;）
        保留空格和
        换行。</pre>

    <!-- hr 是“水平分割线”的语义标签，默认渲染为一条横线，样式可自定义 -->
    <hr> 

    <h2>2. 图片与超链接</h2>

    <!-- img 是空元素（自闭合），src 必填，alt 在图片加载失败或无障碍场景下替代显示 -->
    <p>图片使用 &lt;img&gt; 标签嵌入。它是自闭合标签。</p>
    <img src="./web-ui-img.png" alt="一张描述图片内容的示例图片" width="400" title="web用户界面课程的学习通封面">

    <!-- a 标签的 href 支持绝对/相对路径、URL 片段、甚至邮箱电话；
         target="_blank" 新开标签页，同时加上 rel="noopener" 防止窗口对象被滥用，提升安全性 -->
    <p>超链接使用 &lt;a&gt; 标签。</p>
    <p>访问 <a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs</a> 学习更多Web技术（target="_blank"会在新标签页打开）。</p>

    <!-- href="#" 默认跳回页面顶部；如要精确定位可把 # 换成对应元素的 id 值，例如 #section3 -->
    <p><a href="#">跳回页面顶部</a>（通过ID锚点）。</p>
</body>
</html>